<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>北京各区行政区面</title>
    <style>
        html,
        body,
        #container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="container" class="container"></div>
    <script src="//webapi.amap.com/maps?v=1.4.15&key=eb14d99791392d6f5b3501a1a4e071f7"></script>
    <script src="//webapi.amap.com/loca?v=1.3.0&key=eb14d99791392d6f5b3501a1a4e071f7"></script>
    <script src="//a.amap.com/Loca/static/dist/jquery.min.js"></script>
    <script>
        var map = new AMap.Map('container', {
            zoom: 3,
            //viewMode:'3D',
            center: [-99.241291, 39.51401]
        });
        var wms = new AMap.TileLayer.WMTS({
            url: 'http://t0.tianditu.gov.cn/img_w/wmts',
            blend: false,
            tileSize: 256,
            params: {
                tk: 'fb2f1e543ab14f984cac70660ff10093',
                SERVICE: 'WMTS',
                Layer: 'ibo',
                Version: '1.0.0',
                Format: 'tiles'
            }
        })
        wms.setMap(map)
    </script>
</body>

</html>